<template>
  <div class="flowNodeClass" style="overflow-x: auto;">
    
    <div class="flow-desgin">
      <section class="flow-desgin-main">
        <!-- 流程节点界面 -->
        <div class="box-scale">
            <div class="steps">
              <el-steps :active="orderStatus"  align-center>
                <el-tooltip effect="customized" placement="top-start" v-for="item in items"
            :show-after="500"
            style="font-size:14px;background-color:#419641;" popper-class="audittooltip">
            <template #content>
              <div class="tooltiptitlefinish">
                <div style="float: left;">{{item.ccUserId.nodeName}}</div>
              </div>
              <div :class="gettooltipcontentclass(item)">
                    <div>
                      <div  style="width: 100%;float: left;">
                        <div style="float: left;">
                          {{item.ccUserId.nodeName.indexOf("编辑")>-1?"申请人":"审批人"}}:{{"暂无"}}
                        </div>
                        <div style="float: right;margin-left: 100px;">{{getfortime(item)}}</div>
                      </div>
                      <div>审批动作:{{ item.ccUserId.billStatusName}}</div>
                      <div>审批意见:{{""}}</div>
                  </div>
                </div>           
            </template>
                  <el-step :title="item.ccUserId.nodeName" :class="getstepclass(item)"
                  style="flex-basis:9%;">
                  </el-step>
                </el-tooltip>
              </el-steps>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, watch} from "vue";
import { useRouter } from "vue-router";
import { IconPlus, IconMinus } from "@arco-design/web-vue/es/icon";
import FlowManApi from "@/api/flowable/FlowManApi";
import FlowApi from "@/api/flowable/FlowApi";
import { STATUS_LIST, WIDGET, CMD,STATUS,CMDCONTENT } from "@/components/flowable/flow/common/FlowConstant";
import cache from "@/utils/cache";

const router = useRouter();

  let orderStatus =ref(10);
  let errorReson=ref("");
  let items= ref([
        {
            "id": "6EAEDE2C-EEB1-444E-A59A-2954F1156E89",
            "createTime": "20230519074100",
            "createUser": null,
            "entityName": "ProcessDetail",
            "auditTime": "20231031013800",
            "auditor": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
            "flowCmd": 1,
            "flowInstId": "67368279-C9EC-425D-8DF3-B8DEE4CECDD7",
            "multiInstanceApprovalType": 0,
            "flowComment": null,
            "flowType": null,
            "isUnderway": null,
            "assignee": null,
            "flowNodeId": null,
            "flowTaskId": null,
            "ccUserId": {
              "nodeName":"资产变动单编辑",
              "isOld":"true",
              "isBack":false,
              "auditingLevel":0,
              "isBinding":false,
              "currentRouteId":"5D32D00B-2A3D-4D1B-85F5-23ED417A67B4",
              "nextRouteId":"5D4B5661-4D2B-43F2-BDDC-7AA0EF5AC2DE",
              "billStatusName":"制单中"}
        },
        {
            "id": "26021049-AA86-4435-A4B7-96D4C8D50349",
            "createTime": "20231031013800",
            "createUser": null,
            "entityName": "ProcessDetail",
            "auditTime": "20231031013800",
            "auditor": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
            "flowCmd": 128,
            "flowInstId": "67368279-C9EC-425D-8DF3-B8DEE4CECDD7",
            "multiInstanceApprovalType": 0,
            "flowComment": null,
            "flowType": null,
            "isUnderway": null,
            "assignee": null,
            "flowNodeId": null,
            "flowTaskId": null,
            "ccUserId": {
              "nodeName":"通过",
              "isOld":"true",
              "isBack":false,
              "auditingLevel":1,"isBinding":false,"currentRouteId":
            "5D4B5661-4D2B-43F2-BDDC-7AA0EF5AC2DE",
            "nextRouteId":"5D4B5661-4D2B-43F2-BDDC-7AA0EF5AC2DE","billStatusName":"已执行"}
        }
    ]);
// 属性
let props = defineProps({
	flowInts: { type: Object, default: () => ({}) },
	flowDef: { type: Object, default: () => ({}) },
  myitems:{type:Array,default:[]}
});

watch(

	() => props.flowInts,
	(nv) => {
    if (nv){

    FlowApi.listOldFlows({ flowInstId: nv.id  }).then((resp2) => {    
			if(resp2.code=2000){
				if(resp2.data){
					//this.isold=true;
          loaditem(resp2.data || []);
         
          //items.value=resp2.data;
				}
			}
		});	
      
      /* 
      FlowApi.listOldFlows({ flowInstId: nv.id  }).then((resp2) => {
        
      });
      */
    }

	},
	{ immediate: true }
);

const loaditem= async(myitems)=>{
    let newitems=[];
    let flag=false;//标识是否拒绝或撤销
    for (let index = 0; index < myitems.length; index++) {
      const item = myitems[index];
      item.ccUserId=JSON.parse(item.ccUserId);

      newitems.push(item);

  }
 // console.log(newitems);
items.value=newitems;

};


const gettooltipcontentclass=(item,task)=>{   

      if(item.ccUserId==null){return '';}else
      if(item.ccUserId.isBinding){
        return 'tooltipcontentclose';
      }else if(item.ccUserId.isBack){
        return 'tooltipcontentcancel';
      }else{
        return 'tooltipcontentfinish'
      }
    };
const  getstepclass=(item)=>{

      if(item.ccUserId==null){return '';}else
      if(item.ccUserId.isBinding){
        return 'closestep';
      }else if(item.ccUserId.isBack){
        return 'cancelstep';
      }else{
        return 'finishstep'
      }
    };
  const getoperator=(task)=>{
      
        return "";
      
    
    };
    const getfortime=(item)=>{
     
      if(item!=undefined){
        if(item.auditTime!=""){
          if(item.auditTime.length>8){
            let str=item.auditTime.toString();
           // alert(str);
            let datestr= str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2)+":"+str.substr(10,2)+":"+str.substr(12,2);
            return datestr;
          }else{
            return item.auditTime;
          }
        }else{
          return item.auditTime;
        }

      }else{
        return "";
      }
      
    
    
  
  };


</script>

<style scoped lang="less">
.flowNodeClass *,
.flowNodeClass *::before,
.flowNodeClass *::after {
  outline: none;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}
@canvas-bg: #f5f5f7;

.flow-desgin {
  height: 100%;
  z-index: 1;
  cursor: grab;
}

.flow-desgin-main {
  width: 100%;
  background-color: #fff;
  user-select: none;

  .zoom {
    display: flex;
    position: absolute;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
    width: 125px;
    right: 40px;
    margin-top: 30px;
    z-index: 10;

    .zoom-in,
    .zoom-out {
      width: 30px;
      height: 30px;
      background: #fff;
      color: #c1c1cd;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #111;
      border-radius: 50%;
      transition: all 0.5s ease;

      &:hover {
        // transform: scale(1.1);
        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        border: 1px solid transparent;
        box-shadow: 0 2px 5px #0000001a;
      }
    }

    .zoom-in.disabled,
    .zoom-out.disabled {
      opacity: 0.5;
    }
  }

  .box-scale {
    transform: scale(1);
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 54.5px 0;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    transform-origin: 50% 0px 0px;
  }

  .end-node {
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    &::before {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 4px;
      border-style: solid;
      border-width: 8px 6px 4px;
      border-color: #cacaca transparent transparent;
    }

    .title {
      height: 28px;
      border-radius: 8px 8px 0 0;
      background: #a9b4cd;
      padding: 0 12px;
    }

    .content {
      color: #646a73;
    }
  }
}


//表单内的审核流程图
::v-deep.steps {
	margin-top: 50px !important;
	margin-left: 20px !important;
	.el-step__main{
		//text-align: center;
	}
	.el-step.is-horizontal .el-step__line {
		//left: 40px;
		//right: -40px;
	}
	.el-step__title{
		font-size: 12px;
		font-weight: 400;
		position:relative;
		top: -60px;
		//min-width: 80px;
		text-align: center;
	}
	.el-step__description{
		font-size: 10px;
	   font-weight: 400;
	   position: relative;
	   top: -30px;
	   //min-width: 80px;
	   text-align: center;
	}
	  .el-step__title.is-finish {
        color: #419641;//编辑时标题颜色

      }
	  .el-step__description.is-finish {
		color: #419641;//编辑时标题颜色
	 }

     //finish状态自定义图片
      .el-step__head.is-finish {
        position: relative;
        height: 24px;
		border: none !important;
		color: #FF9800;

        .el-step__icon.is-text {
          border: none; //不显示圆圈
          //position: absolute;
          top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          //background: #2b7bf0;
          // background-color: #000;
          background-image: url('~@/components/flowable/SVG/online-ok.svg');
          background-size: 100% 100%;

          // background: transparent;
        }

        .el-step__icon-inner {
          display: none;
        }
      }


	  .is-finish .el-step__line {
		//position: absolute;
		border-color: inherit;
		background-color: #FF9800 !important;
		height: 3px !important;
	}


      .el-step__title.is-process {
        color: #FF9800;//编辑时标题颜色
      }
	  .el-step__description.is-process {
		color: #FF9800;//编辑时标题颜色
	 }
     //process状态自定义图片
      .el-step__head.is-process {
        position: relative;
        height: 24px;

        .el-step__icon.is-text {
          border: none; //不显示圆圈
          //position: absolute;
        top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          //background: #2b7bf0;
          // background-color: #000;
          background-image: url('~@/components/flowable/SVG/online-time.svg');
          background-size: 100% 100%;

          // background: transparent;
        }

        .el-step__icon-inner {
          display: none;
        }
      }
	  .is-process .el-step__line {
		position: absolute;
		border-color: inherit;
		height: 3px !important;
	}
      .el-step__icon-inner {
          display: none; //不显示内部数字
      }

      //success状态
      .el-step__title.is-success {
         color: #419641;//标题颜色
      }

      .el-step__head.is-success {
        // border-color: #2b7bf0;//圈边及连线颜色

        .el-step__icon.is-text {
          border: none;
		  //position: absolute;
		  top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          //background: #2b7bf0;
          background-image: url('~@/components/flowable/SVG/online-time.svg');
          background-size: 100% 100%;

        }
      }

      //wait状态
	   //success状态
	   .el-step__title.is-wait {
	 }
	 .el-step__description.is-wait {
	 }
       .el-step__head.is-wait {
		position: relative;
		border: none !important;

        .el-step__icon.is-text {

		  border: none;
		  //position: absolute;
		  background-image: url('~@/components/flowable/SVG/online-time.svg');
          background-size: 100% 100%;
		  top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          .el-step__icon-inner {
            // color: #95c1fc;
          }

        }
      }
	  .is-wait .el-step__line {
		position: absolute;
		border-color: inherit;
		height: 3px !important;
	}
	.backstep .el-step__title,.backstep .el-step__description{
		color: #FF9800 !important;
	}
	.cancelstep .el-step__title,.cancelstep .el-step__description{
		color: rgb(180, 180, 180)  !important;
	}


	.closestep .el-step__title,.closestep .el-step__description{
		color: red  !important;
	}



    }
	//单据明细审批流程图tooltip样式
	.tooltiptitlefinish{//已审批头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:#419641 !important;padding: 0 5px;
		border-bottom:1px solid rgba(65,150,65,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitlewait{//未审批头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:rgb(168, 171, 178) !important;padding: 0 5px;
		border-bottom:1px solid rgba(174,176,182,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitleback{//驳回头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:#FF9800 !important;padding: 0 5px;
		border-bottom:1px solid rgba(255,153,0,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitleclose{//不通过头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:red !important;padding: 0 5px;
		border-bottom:1px solid rgba(255,0,0,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitlecancel{//作废头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:rgb(180, 180, 180) !important;padding: 0 5px;
		border-bottom:1px solid rgba(180,180,180,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentfinish{//已审批内容
		background-color: rgba(65,150,65,0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;

	}
	.tooltipcontentwait{//未审批内容
		//border-radius: 3px;padding: 0 5px;
		background-color: rgba(174,176,182,0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentback{//驳回内容
		background-color: rgba(255,153,0,0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentclose{//不通过内容
		background-color: rgba(255, 0, 0, 0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentcancel{//不通过内容
		background-color: rgba(180, 180, 180, 0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}


</style>
